<template>
  <div class="b-container">
    <div class="header">
      <div class="header-left">
        <h1><el-icon><Document /></el-icon>B页面首页</h1>
        <el-tag type="info" effect="plain" class="version-tag">Version 1.0</el-tag>
        <el-button type="primary" @click="showUserList()">
          <el-icon><User /></el-icon> 查看用户列表
        </el-button>
      </div>
      <div class="user-info">
        <span class="welcome">欢迎您 <span class="real-name">{{ realName }}</span></span>
        <el-avatar :size="32" class="user-avatar">
          <el-icon><User /></el-icon>
        </el-avatar>
        <span class="username">{{ username }}</span>
        <el-tooltip content="退出登录" placement="bottom">
          <button class="logout-btn" @click="handleLogout">
            <el-icon><SwitchButton /></el-icon> 退出登录
          </button>
        </el-tooltip>
      </div>
    </div>
    <div class="welcome-section">
      <el-card class="welcome-card">
        <template #header>
          <div class="card-header">
            <el-icon><Document /></el-icon>
            <span>数据列表</span>
          </div>
        </template>
        <div class="welcome-content">
          <el-empty v-if="loading === false && dataList.length === 0" description="暂无数据" />
          <el-skeleton v-if="loading" rows="4" animated />
          <div v-else>
            <el-card v-for="item in paginatedData" :key="item.id" class="data-item-card" shadow="hover">
              <div class="data-item-header">
                <span class="data-title">{{ item.articleTitle || '无标题' }}</span>
                <div class="data-right">
                  <el-tag :type="getStatusTagType(item.status)" class="data-status-tag">
                    {{ getStatusText(item.status) }}
                  </el-tag>
                  <div class="data-actions">
                    <el-button type="primary" size="small" @click="downloadFile(item.fileId)">
                      下载文献
                    </el-button>
                    <el-button type="success" size="small" @click="downloadQAFile(item.fileId)">
                      下载QA对
                    </el-button>
                  </div>
                </div>
              </div>
            </el-card>
            <div class="pagination-bar">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :total="total"
                :page-sizes="[10, 20, 50]"
                layout="total, sizes, prev, pager, next, jumper"
              />
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 添加用户列表弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="用户列表"
      width="80%"
      :close-on-click-modal="false"
    >
      <div class="table-toolbar">
        <el-button 
          type="primary" 
          :disabled="!selectedUsers.length"
          @click="handleGroup"
        >
          <el-icon><Plus /></el-icon> 分组
        </el-button>
      </div>
      <el-table :data="userList" style="width: 100%" border stripe @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="分组ID" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.groupId" type="success">{{ scope.row.groupId }}</el-tag>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="employeeId" label="员工ID" width="120" />
        <el-table-column prop="username" label="用户名" width="120" />
        <el-table-column prop="realName" label="真实姓名" width="120" />
        <el-table-column prop="phone" label="电话" width="120" />
        <el-table-column prop="major" label="专业" width="120" />
        <el-table-column prop="specialization" label="研究方向" width="150" />
        
        <el-table-column prop="permissionLevel" label="权限等级" width="100">
          <template #default="scope">
            <el-tag :type="getPermissionTagType(scope.row.permissionLevel)">
              {{ getPermissionLevelText(scope.row.permissionLevel) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template #default="scope">
            {{ formatTime(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260" fixed="right">
          <template #default="scope">
            <div class="user-action-btns">
              <el-button
                type="primary"
                size="small"
                @click="handleEdit(scope.row)"
                class="action-btn edit-btn"
              >
                <el-icon><Edit /></el-icon> 修改
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="handleDelete(scope.row)"
                class="action-btn delete-btn"
              >
                <el-icon><Delete /></el-icon> 删除
              </el-button>
              <el-button
                v-if="scope.row.permissionLevel === 1"
                type="info"
                size="small"
                @click="viewUserFiles(scope.row.id)"
                class="action-btn file-btn"
              >
                <el-icon><Document /></el-icon> 查看上传文件
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 16px; text-align: right;">
        <el-pagination
          v-model:current-page="userCurrentPage"
          v-model:page-size="userPageSize"
          :total="userTotal"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleUserSizeChange"
          @current-change="handleUserPageChange"
        />
      </div>
    </el-dialog>

    <!-- 修改用户信息弹窗 -->
    <el-dialog
      v-model="editDialogVisible"
      title="修改用户信息"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form
        ref="editFormRef"
        :model="editForm"
        label-width="100px"
        :rules="editRules"
      >
        <el-form-item label="员工ID" prop="employeeId">
          <el-input v-model="editForm.employeeId" placeholder="请输入员工ID" />
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="editForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="editForm.password"
            type="password"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="editForm.realName" placeholder="请输入真实姓名" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="editForm.phone" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-input v-model="editForm.major" placeholder="请输入专业" />
        </el-form-item>
        <el-form-item label="研究方向" prop="specialization">
          <el-input v-model="editForm.specialization" placeholder="请输入研究方向" />
        </el-form-item>
        <el-form-item label="权限等级" prop="permissionLevel">
          <el-select v-model="editForm.permissionLevel" placeholder="请选择权限等级">
            <el-option label="文件上传用户" :value="1" />
            <el-option label="QA上传用户" :value="2" />
            <el-option label="计算机审核" :value="3" />
            <el-option label="专业老师审核" :value="4" />
            <el-option label="系统管理员" :value="5" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitEdit" :loading="submitLoading">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 用户上传文件弹窗 -->
    <el-dialog
      v-model="userFileDialogVisible"
      title="用户上传文件列表"
      width="80%"
      :close-on-click-modal="false"
    >
      <el-skeleton v-if="userFileLoading" rows="6" animated />
      <el-table v-else :data="userFileList" style="width: 100%" border stripe>
        <el-table-column prop="articleTitle" label="标题" min-width="200" />
        <el-table-column prop="major" label="专业" width="120" />
        <el-table-column prop="status" label="状态" width="120">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="上传时间" width="180">
          <template #default="scope">
            {{ formatTime(scope.row.createTime) }}
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 16px; text-align: right;">
        <el-pagination
          v-model:current-page="userFileCurrentPage"
          v-model:page-size="userFilePageSize"
          :total="userFileTotal"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleUserFileSizeChange"
          @current-change="handleUserFilePageChange"
        />
      </div>
    </el-dialog>

    <!-- 用户分组弹窗 -->
    <el-dialog
      v-model="groupDialogVisible"
      title="用户分组"
      width="30%"
      append-to-body
    >
      <el-form :model="groupForm" label-width="80px">
        <el-form-item label="分组ID">
          <el-input-number 
            v-model="groupForm.groupId" 
            :min="1" 
            controls-position="right"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="groupDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitGroup" :loading="groupSubmitLoading">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { baseURL, ip } from '@/config/baseURL';
import { ref, onMounted, computed, watch } from 'vue';
import { useRouter } from 'vue-router';
import { Document, User, SwitchButton, Edit, Delete, Plus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';

const router = useRouter();
const username = ref(localStorage.getItem('username') || '用户');
const realName = ref('');
const dataList = ref([]);
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const dialogVisible = ref(false);
const userList = ref([]);
const editDialogVisible = ref(false);
const editFormRef = ref(null);
const submitLoading = ref(false);
const editForm = ref({
  id: 0,
  employeeId: '',
  username: '',
  password: '',
  realName: '',
  email: '',
  phone: '',
  major: '',
  specialization: '',
  permissionLevel: 1,
  count: 0,
  createTime: '',
  updateTime: ''
});

const editRules = {
  employeeId: [{ required: true, message: '请输入员工ID', trigger: 'blur' }],
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
  permissionLevel: [{ required: true, message: '请选择权限等级', trigger: 'change' }]
};

const total = ref(0);

const paginatedData = computed(() => dataList.value);

const userCurrentPage = ref(1);
const userPageSize = ref(10);
const userTotal = ref(0);

// 用户上传文件弹窗相关
const userFileDialogVisible = ref(false);
const userFileList = ref([]);
const userFileTotal = ref(0);
const userFileCurrentPage = ref(1);
const userFilePageSize = ref(10);
const userFileLoading = ref(false);
const userFileUserId = ref(null);

// 用户分组相关
const selectedUsers = ref([]);
const groupDialogVisible = ref(false);
const groupSubmitLoading = ref(false);
const groupForm = ref({
  groupId: 1
});

function handleLogout() {
  localStorage.removeItem('isLoggedIn');
  localStorage.removeItem('username');
  localStorage.removeItem('userRole');
  localStorage.removeItem('token');
  router.push('/login');
}

function getStatusText(status) {
  const statusMap = {
    'pending': '待处理',
    'processing': '处理中',
    'completed': '已完成',
    'failed': '处理失败',
    '-3': '已标记,等待AI重新分析',
    '-2': 'AI分析中',
    '-1': 'AI分析失败',
    '0': 'AI分析完成',
    '1': '专家审核失败',
    '2': '专家审核成功',
    '3': '专家审核成功',
    '5': '专家审核成功',
    '7': '全部通过',
    '8': 'AI分析失败',
    '9': 'AI分析中',
    'uploading': '上传中'
  };
  return statusMap[status] || '未知状态';
}
function getStatusTagType(status) {
  const typeMap = {
    'pending': 'warning',
    'processing': 'primary',
    'completed': 'success',
    'failed': 'danger',
    '-3': 'warning',
    '-2': 'primary',
    '-1': 'danger',
    '0': 'success',
    '1': 'danger',
    '2': 'success',
    '3': 'success',
    '5': 'success',
    '7': 'success',
    '8': 'danger',
    '9': 'info',
    'uploading': 'primary'
  };
  return typeMap[status] || 'info';
}
function formatTime(time) {
  if (!time) return '-';
  try {
    return new Date(time).toLocaleString();
  } catch {
    return time;
  }
}


// 获得文件列表数据
async function fetchData() {
  loading.value = true;
  try {
    const url = `${ip}/api/b/list/fileconfig?pageNum=${currentPage.value}&pageSize=${pageSize.value}`;
    const res = await axios.get(url, {
      headers: { auth: localStorage.getItem('auth') }
    });
    console.log("返回的数据", res.data);
    if (res.data && res.data.code === 200 && res.data.data) {
      dataList.value = res.data.data.data || [];
      total.value = res.data.data.total || 0;
    } else {
      dataList.value = [];
      total.value = 0;
      ElMessage.error(res.data?.msg || '获取数据失败');
    }
  } catch (e) {
    dataList.value = [];
    total.value = 0;
    ElMessage.error('获取数据失败');
  } finally {
    loading.value = false;
  }
}

function downloadFile(fileId) {
  if (!fileId) {
    ElMessage.error('文件ID无效，无法下载');
    return;
  }
  // const url = `http://10.137.10.169:8080/api/file/download/${fileId}`;
  const url = ip + `/api/file/download/${fileId}`;
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', '');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  ElMessage.success('文献下载已开始');
}

// 下载QA对
async function downloadQAFile(fileId) {
  if (!fileId) {
    ElMessage.error('文件ID无效，无法下载QA对');
    return;
  }
  try {
    const res = await axios.get(ip + `/api/Static/qa/${fileId}`, {
      headers: { auth: localStorage.getItem('token') }
    });
    
    if (res.data.code === 200 && res.data.data) {
      // 将QA对数据转换为特定格式的JSON
      const qaData = res.data.data.map(qa => ({
        instruction: qa.instruction || '',
        output: qa.output || '',
        input: '',
        system: ''
      }));
      
      // 创建并下载JSON文件
      const jsonStr = JSON.stringify(qaData, null, 2);
      const blob = new Blob([jsonStr], { type: 'application/json' });
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', `QA对_${fileId}.json`);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
      
      ElMessage.success('QA对下载成功');
    } else {
      throw new Error(res.data?.msg || '获取QA对数据失败');
    }
  } catch (error) {
    console.error('下载QA对失败:', error);
    ElMessage.error('下载QA对失败');
  }
}

// 获取权限等级对应的标签类型
function getPermissionTagType(level) {
  const typeMap = {
    1: 'info',
    2: 'success',
    3: 'warning',
    4: 'danger',
    5: 'primary'
  };
  return typeMap[level] || 'info';
}

// 获取权限等级对应的文本
function getPermissionLevelText(level) {
  const textMap = {
    1: '文件上传用户',
    2: 'QA上传用户',
    3: '计算机审核',
    4: '专业老师审核',
    5: '系统管理员'
  };
  return textMap[level] || '未知权限';
}

// 获取用户分组信息
async function getUserGroup(userId) {
  try {
    const res = await axios.get(`${ip}/api/userGroup/userId/${userId}`, {
      headers: { auth: localStorage.getItem('auth') }
    });
    if (res.data && res.data.code === 200 && res.data.data && res.data.data.length > 0) {
      return res.data.data[0].groupId;
    }
    return null;
  } catch (error) {
    console.error('获取用户分组失败:', error);
    return null;
  }
}

// 显示用户列表
async function showUserList(page = userCurrentPage.value, size = userPageSize.value) {
  try {
    const url = `${ip}/api/b/list/user?pageNum=${page}&pageSize=${size}`;
    const res = await axios.get(url, {
      headers: { auth: localStorage.getItem('auth') }
    });
    if (res.data && res.data.code === 200 && res.data.data) {
      const users = res.data.data.data || [];
      // 获取每个用户的分组信息
      const usersWithGroup = await Promise.all(
        users.map(async (user) => {
          const groupId = await getUserGroup(user.id);
          return { ...user, groupId };
        })
      );
      userList.value = usersWithGroup;
      userTotal.value = res.data.data.total || 0;
      userCurrentPage.value = res.data.data.current || page;
      userPageSize.value = res.data.data.size || size;
      dialogVisible.value = true;
    } else {
      userList.value = [];
      userTotal.value = 0;
      ElMessage.error(res.data?.msg || '获取用户列表失败');
    }
  } catch (error) {
    userList.value = [];
    userTotal.value = 0;
    ElMessage.error('获取用户列表失败');
  }
}

// 处理修改用户信息
function handleEdit(row) {
  editForm.value = JSON.parse(JSON.stringify(row));
  editDialogVisible.value = true;
}

// 处理删除用户
function handleDelete(row) {
  ElMessageBox.confirm(
    '确定要删除该用户吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // TODO: 调用删除接口
      ElMessage.success('删除成功');
    })
    .catch(() => {
      ElMessage.info('已取消删除');
    });
}

// 提交修改
async function submitEdit() {
  if (!editFormRef.value) return;
  
  await editFormRef.value.validate(async (valid) => {
    if (valid) {
      submitLoading.value = true;
      try {
        const res = await axios.post(ip + '/api/b/update', editForm.value, {
          headers: { auth: localStorage.getItem('auth') }
        });
        
        if (res.data && res.data.code === 200) {
          ElMessage.success('修改成功');
          editDialogVisible.value = false;
          showUserList(); // 刷新用户列表
        } else {
          throw new Error(res.data?.msg || '修改失败');
        }
      } catch (error) {
        console.error('修改用户信息失败:', error);
        ElMessage.error(error.message || '修改失败');
      } finally {
        submitLoading.value = false;
      }
    }
  });
}

function handleUserPageChange(val) {
  userCurrentPage.value = val;
  showUserList(userCurrentPage.value, userPageSize.value);
}
function handleUserSizeChange(val) {
  userPageSize.value = val;
  userCurrentPage.value = 1;
  showUserList(userCurrentPage.value, userPageSize.value);
}

// 查看上传文件方法
async function viewUserFiles(userId, page = 1, size = 10) {
  userFileUserId.value = userId;
  userFileLoading.value = true;
  try {
    const url = `${ip}/api/b/user/files?userid=${userId}&pageNum=${page}&pageSize=${size}`;
    const res = await axios.get(url, {
      headers: { auth: localStorage.getItem('auth') }
    });
    if (res.data && res.data.code === 200 && res.data.data) {
      userFileList.value = res.data.data.data || [];
      userFileTotal.value = res.data.data.total || 0;
      userFileCurrentPage.value = res.data.data.current || page;
      userFilePageSize.value = res.data.data.size || size;
      userFileDialogVisible.value = true;
    } else {
      userFileList.value = [];
      userFileTotal.value = 0;
      ElMessage.error(res.data?.msg || '获取文件列表失败');
    }
  } catch (error) {
    userFileList.value = [];
    userFileTotal.value = 0;
    ElMessage.error('获取文件列表失败');
  } finally {
    userFileLoading.value = false;
  }
}

// 分页切换
function handleUserFilePageChange(val) {
  userFileCurrentPage.value = val;
  viewUserFiles(userFileUserId.value, userFileCurrentPage.value, userFilePageSize.value);
}
function handleUserFileSizeChange(val) {
  userFilePageSize.value = val;
  userFileCurrentPage.value = 1;
  viewUserFiles(userFileUserId.value, userFileCurrentPage.value, userFilePageSize.value);
}

// 关闭弹窗时重置
watch(userFileDialogVisible, (val) => {
  if (!val) {
    userFileCurrentPage.value = 1;
    userFilePageSize.value = 10;
    userFileList.value = [];
    userFileTotal.value = 0;
    userFileUserId.value = null;
  }
});

watch([currentPage, pageSize], () => {
  fetchData();
});

watch(dialogVisible, (val) => {
  if (!val) {
    userCurrentPage.value = 1;
    userPageSize.value = 10;
  }
});

// 选择用户变化
function handleSelectionChange(selection) {
  selectedUsers.value = selection;
}

// 点击分组按钮
function handleGroup() {
  if (!selectedUsers.value.length) {
    ElMessage.warning('请先选择要分组的用户');
    return;
  }
  groupDialogVisible.value = true;
}

// 提交分组
async function submitGroup() {
  if (!selectedUsers.value.length) {
    ElMessage.warning('请先选择要分组的用户');
    return;
  }
  
  const groupData = selectedUsers.value.map(user => ({
    groupId: groupForm.value.groupId,
    userId: user.id
  }));

  groupSubmitLoading.value = true;
  try {
    const res = await axios.post(ip + '/api/userGroup', groupData, {
      headers: { auth: localStorage.getItem('auth') }
    });
    
    if (res.data && res.data.code === 200) {
      ElMessage.success('分组成功');
      groupDialogVisible.value = false;
      selectedUsers.value = [];
      // 重新加载用户列表
      await showUserList(userCurrentPage.value, userPageSize.value);
    } else {
      throw new Error(res.data?.msg || '分组失败');
    }
  } catch (error) {
    console.error('用户分组失败:', error);
    ElMessage.error(error.message || '分组失败');
  } finally {
    groupSubmitLoading.value = false;
  }
}

onMounted(() => {
  fetchData();
  // 获取真实姓名
  axios({
    method: 'get',
    url: ip + '/api/me',
    headers: {
      'auth': localStorage.getItem('auth')
    }
  }).then(res => {
    if (res.data && res.data.code === 200) {
      realName.value = res.data.data.realName || '';
    }
  }).catch(() => {});
});
</script>

<style scoped>
.b-container {
  width: 100%;
  min-width: 1200px;
  padding: 30px;
  box-sizing: border-box;
  position: relative;
  background-color: #f5f7fa;
  min-height: 100vh;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.header h1 {
  color: #2c3e50;
  font-size: 24px;
  margin: 0;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}
.welcome {
  font-size: 16px;
  color: #606266;
}
.real-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0 4px;
}
.username {
  font-size: 16px;
  color: #409EFF;
  font-weight: 600;
  margin: 0 10px;
}
.logout-btn {
  background-color: #f56c6c;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}
.logout-btn:hover {
  background-color: #e64242;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(245, 108, 108, 0.3);
}
.welcome-section {
  margin-top: 40px;
}
.welcome-card {
  padding: 30px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  color: #303133;
  font-weight: 600;
}
.welcome-content {
  font-size: 16px;
  color: #606266;
  padding: 20px 0 0 0;
}
.version-tag {
  font-size: 12px;
}
.user-avatar {
  background-color: #409EFF;
  color: white;
}
.data-item-card {
  margin-bottom: 18px;
}
.data-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 16px;
}
.data-title {
  font-size: 17px;
  font-weight: 600;
  color: #2c3e50;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.data-item-info {
  font-size: 14px;
  color: #444;
  line-height: 1.8;
  word-break: break-all;
}
.pagination-bar {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}
.data-actions {
  display: flex;
  gap: 10px;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 用户列表弹窗样式 */
:deep(.el-dialog) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-dialog__header) {
  margin: 0;
  padding: 20px;
  background: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-table) {
  margin: 10px 0;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

:deep(.el-tag) {
  border-radius: 4px;
}

/* 修改用户信息弹窗样式 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-input),
:deep(.el-select) {
  width: 100%;
}

:deep(.el-select .el-input) {
  width: 100%;
}

/* 操作按钮样式 */
.el-button--small {
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.el-button--small .el-icon {
  font-size: 14px;
}

.user-action-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
.action-btn {
  border-radius: 20px !important;
  font-weight: 500;
  transition: box-shadow 0.2s, transform 0.2s;
  box-shadow: 0 1px 4px rgba(64, 158, 255, 0.08);
  min-width: 90px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.action-btn .el-icon {
  font-size: 15px;
}
.edit-btn {
  background: linear-gradient(90deg, #409EFF 0%, #66b1ff 100%) !important;
  color: #fff !important;
  border: none !important;
}
.edit-btn:hover {
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.18);
  transform: translateY(-2px);
}
.delete-btn {
  background: linear-gradient(90deg, #f56c6c 0%, #f78989 100%) !important;
  color: #fff !important;
  border: none !important;
}
.delete-btn:hover {
  box-shadow: 0 4px 16px rgba(245, 108, 108, 0.18);
  transform: translateY(-2px);
}
.file-btn {
  background: linear-gradient(90deg, #909399 0%, #a3aab1 100%) !important;
  color: #fff !important;
  border: none !important;
}
.file-btn:hover {
  box-shadow: 0 4px 16px rgba(144, 147, 153, 0.18);
  transform: translateY(-2px);
}
@media (max-width: 900px) {
  .user-action-btns {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .action-btn {
    min-width: 100%;
    justify-content: center;
  }
}

.data-status-tag {
  margin-left: 12px;
  min-width: 80px;
  text-align: center;
  font-size: 13px;
  white-space: nowrap;
}

.table-toolbar {
  margin-bottom: 16px;
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px 0;
}

.table-toolbar .el-button {
  font-weight: 500;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.table-toolbar .el-button .el-icon {
  font-size: 16px;
}
</style>
